Desde que descubrí las plantillas Pyzam me atrajo el efecto de la transparencia, no tardé en probar y aunque no estaba mal del todo comprobé con desilusión que el efecto no era tan perfecto como yo esperaba.
Demasiado bonito y demasiado sencillo, pero en la práctica nos encontrábamos con el problema que al añadir opacidad o transparencia se anteponía de forma que los textos y las imágenes también mostraban la capa de transparencia.
Era necesario añadir una capa de transparencia sobre el background de la página pero que respetase el contenido ¿Cómo hacerlo? ni la más mínima idea, pregunté, busqué información y a mi pesar tuve que dejarlo de lado por no obtener los resultados esperados.
Después de un tiempo descubrí que alguien aportaba un sabroso dato sobre transparencias, se trata de Jorge R. Aldana CSS: Columnas Transparentes tiene la maravillosa idea de traducir a español la entrada original de Bits & Pixels que es en realidad el autor de esta maravillosa solución.
Hice algunas pruebas para añadir un ejemplo, la primera vez algo hacía mal, luego caí en la cuenta que las explicaciones eran para una columna, había que añadir estilos a una segunda columna y algo más tarde daba saltos de contenta.

Click en la imagen

Si quieres añadir este efecto a tu plantilla no olvides hacer antes una copia de respaldo, yo recomiendo también probar antes en otro blog con la misma plantilla que deseáis hacer los cambios.

Lo primero de todo fue añadir una imagen de fondo a la plantilla, utilicé la misma imagen que el autor utiliza para su ejemplo y proporciona en un zip. si queréis probar esta es la imagen:



En plantilla Edición de HTML localizamos body { y añadimos la imagen de esta forma:

body {
background:url('url-imgen');

Una vez tenemos la imagen nos situamos justo antes de ]]></b:skin> y añadimos lo siguiente:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);/* For IE6&7 */
}
.container {
position: relative;
float: left;
}
.content {
position: relative; /* Fixes the z-index */
float: left;
}
#column-1 {
width: 550px;
}
#column-1 .content {
padding: 20px;
width: 510px;
}
#column-2 {
width: 220px;
margin-left: 20px;
float: left;
display: inline;
}
#column-2 .content {
padding: 20px;
width: 220px;
}

/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */ * html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); }
* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }

Ahora lo que haremos será aplicar una capa de transparencia sobre el fondo (overlay) y una segunda capa (content) para el contenido, de esta forma el contenido se muestra sobre una transparencia.
Para añadir las capas necesitamos dos divs es decir dos bloques que se incluirán dentro de otro div con posición relativa.

<div class='container' id='column-1'>
<div class='overlay'/>
<div class='content'>
</div>
</div>

Este bloque lo añadiremos envolviendo el espacio de las entradas, buscaremos:
<div id='main-wrapper'> y justo antes añadimos lo que está en color rojo.

<div class='container' id='column-1'>
<div class='overlay'/>
<div class='content'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget ....(widgets añadidos)
..........
..........
..........
</b:section>
</div>
</div>
</div>

Donde los puntos suspensivos es el código que cada uno podemos tener, debemos prestar atención y comprobar que añadimos:

</div>
</div>
justo donde termina:
</b:section>
</div>

Ahora nos queda la sidebar, buscamos <div id='sidebar-wrapper'> y añadimos lo que está en rojo:
<div class='container' id='column-2'>
<div class='overlay'/>
<div class='content'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget... (widgets añadidos)
..........
..........
..........
</b:section>
</div>
</div>
</div>

Si miramos en vista previa veremos la transparencia, pero quizás se desplace la columna o no quede todo lo centrado que nos gustaría, eso tiene su explicación ya que las medidas establecidas no son las mismas en todas las plantillas. Lo que haremos será ayudarnos del primer código que añadimos en la CSS para conseguir sea de nuestro agrado.

¿Lo solucionamos?
"El color de la transparencia" lo podemos modificar en .overlay sustituyendo background: #000; por otro color.

Miramos en #main-wrapper la medida, si por ejemplo es width: 464px; en #column-1 .content añadimos el mismo valor y comprobamos en vista previa el resultado.
Lo mismo ocurría con #column-2 .content, con la diferencia que miraríamos la medida en #sidebar-wrapper.

Si observamos que la transparencia no ocupa todo el contendido aumentaremos el valor en #column-1 y #column-2.

La intensidad de la transparencia puede ser más o menos intensa aumentando o disminuyendo el valor en:

opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);

Con "padding" en #column-1 .content bajamos o subimos el contenido.

Para separar la sidebar de las entradas lo hacemos en #column-2 (margin-left)

Y eso es todo, paciencia y suerte el resultado vale la pena.

Transparencia que ocupa todo el ancho.
Ver ejemplo.
germanbg

Vaya pasada de plantilla.
SALU2

Responder
Anónimo

hola gema:
he seguido los pasos,para colocar la transparencia,pero el blogger este dice que el elemento"b:wiwet" no esta bien cerrado,asi que se me parte el alma,con los chistosos estos.supongo yo que se refieren al ultimo de los codigos que has puesto,ese que va encima de la "sidebar wraper".....
por lo demas el efecto esta muy interesante y tu entrada explicandolo,mucho mejor.

Responder
Alexander Dmitrievich

En su tiempo yo también intenté poner transparencia, pero resultaba en los defectos que tu has marcado,que bueno que ya hay una solución, aunque seguiré con mi diseño.
Un saludo Gem@, que estés bien.

Responder
Gem@

Me alegra que te guste kyle xy ;)

Francisco si dice elemento "b:wiwet" se está refiriendo a algún elemento que ya tenías añadido en tu plantilla, los wiwets los añadimos en la plantilla de diseño como elemento de página y se muestran justo debajo del div donde lo añadimos.
Comprueba que no borraras el cierre del wiwet sin darte cuenta si no encuentras el error mándame la plantilla en archivo xml ;)

Hola Soviet gracias por comentar. Estuve de visita en tu blog pero vi que la widebar ya está añadida ;)

Responder
Natalia

Hola Gema!!! gracias por la ayudita de la otra vez , me re sirvio, te lo agradezco un monton....
ahora queria preguntarte como hago para poner fotos o imagenes al costadito de mi blog (ya que entre a pag, donde tienen imagenes al costado y no se como hacerlo)lo intente pero en la plantilla de diseño solo me sale para enlazar blog o mis entradas.
bueno te dejo besos y sigo en la lucha!!!!!
mientras sigo dando vueltita por tu blog asi aprendo un poquito mas...!

Responder
Alexander Dmitrievich

Así es, me entraron las ganas de experimentar y me ha quedado.

Me pregunto si sería posible que me dijeras un review completo de lo que a ti te parece bien o mal de MundoSoviet, con tu experiencia dentro de este ambiente has de poder decirme muy bien que aspectos hay que mejorar.

Un saludo.

Responder
Gem@

Nataly cuando accedes a la plantilla de diseño nos encontramos con una pestaña que dice "Añadir un elemento de página" si clicas en esa pestaña te mostrará varias opciones, entre ellas está añadir "Imagen"
Aparte de esa opción también puedes añadir una imagen si clicas en HTML/Javascript.
Esta última HTML/Javascript es el lugar indicado para añadir cualquier código html o cualquier script, el código para una imagen es: <img src="url-de-la-imagen">


Soviet yo no estoy cualificada para hacer un review, puedo tener mis gustos sobre la imagen del blog pero no veo justo decir esto me parece bien y aquello mal.
¿Por qué? porque cada uno crea su blog a su propio gusto y necesidades, si yo te dijera cambia esto o aquello ya no sería a tu gusto sino al mio.
A mi me hicieron uno hace tiempo y te puedo asegurar que no ha cambiado nada en mi blog después de él.
Sin embargo hay páginas que se dedican a hacerlo si quieres buscamos alguna ;)

Responder
Sergi

Ante todo grácias por este blog. Mi pregunta es ¿se puede hacer transperencia en un solo post? Gracias

Responder
Gem@

Algo hay sobre eso Blanch sinembargo no está tan conseguido como con este método ya que la capa de opacidad se posiciona sobre la del contenido y cualquier imagen que se añadiera a la entrada pierde nitidez.
puedes ver aquí
Cualquier cosa me avisas :)

Responder
Sergi

Gracias lo voy a probar a ver que tal...

Responder
Gem@

Suerte :)

Responder
Unknown

Gema, es la primera vez que ando por aca... y mi pregunta es: cómo puedo evitar que las imágenes que pongo en mi blog sean transparentes? o reducir la transparencia de la plantilla?
muchas gracias... super interesante

Responder
Gem@

Hola Alely en tu plantilla es imposible que las imágenes salgan nítidas sin perder transparencia el resto de la plantilla.
Me explico, lo que ves en esta entrada es transparencia aplicada a la plantilla, y en tu blog está en la css (como estilos)
Lo que si puedes es quitar transparencia al espacio de las entradas y de esa forma tus imágenes se verán tal como son.
Haz la prueba y busca en la plantilla:
#main-wrapper {
unas líneas más abajo verás:
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
modifica los valores de forma que donde ves 80 ponga 90, algo así:

filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90;
Mira en vista previa el resultado, ya sabes que a mayor valor menos transparencia tiene ;)

Responder
Unknown

ya quedo mas a mi gusto, mil gracias! ya estare de regreso... me queda mucho por aprender de ti

Responder
Gem@

Ha ganado mucho, en definitiva lo que tiene importancia es el contenido del blog y con la transparencia en la css le restaba nitidez a las imágenes.
Ahora me gusta más ;)

Responder
Flores Literarias

yo por acá otra vez... bueno amiga gem@ te pregunto varias cositas relacionadas con las transparencias:

al dividir el blog por secciones, toscamente, puedo decir en cuadros: main,sidebar y footer cuando aplico este elemento de transparencia cobija las partes que no están dentro de los cuadros... cuando vos dices que ajustemos los valores de ambas columnas c1 y c2 con los valores de main wrapper y sidebar wraper respectivamente, no hay forma que abarque solo los cuadros... a esto de cuadros me refiero a las divisiones de la plantilla q explicas en

http://gemablog-.blogspot.com/2008/08/dividir-secciones-con-css.html

o inevitablemente lee todo el mai y sidebar como bloques sin tener en cuenta las divisiones.

Otra pregunta: Blanch preguntaba si se puede aplicar transparencia a un solo post, ya es poxible hacerlo sin problema???

hmmmm bueno no creo tener mas dudas, por ahora, jajaja igual solo he hecho pruebas en el blog destinado para esto y hasta no tener algo concreto no me aventuro a hacer daños...

abrazos y bendiciones...

Responder
BLUEGAZER

Tengo una consulta: En firefox las transparencias salen a la perfeccion, pero en Explorer 7 no salen, como transparencias, mas bien en negro tapando el fondo del blog. Cual puede ser el problema?

De antemano gracias :)

P.S: visita el blog: http://voxpinternacional.blogspot.com/

Responder
Gem@

F.L un pooquito tarde pero te contesto.
La transparencia en un post creo que ya diste con la entrada donde lo explico o creo recordar que me dejaste allí un comentario si no es así me lo dices y lo vemos.
Luego está el tema de la transparencia, si entre el main y la sidebar hay poco espacio la transparencia se unirá formando un solo bloque eso es normal porque a la transparencia le añadimos más anchura que al bloque para que sobresalga un poco.
En esos casos lo ideal es dejar la transparencia co la misma anchura del bloque ya sea del amin o la sidebar.


BLUEGAZER he visto tu blog con Explorer 7 y Firefox y lo veo idéntico con los dos navegadores.
El color negro que ves es el que se asigna a la transparencia background: #000; puedes probar a sustituir el negro por un gris oscuro o... disminuir la intensidad de la transparencia a 0.55;

Responder
Anónimo

Holis Gema :P

Mira... si quiero colocar el efecto "transparencia" en todo el blog, sin que esten separados el content con la sidebar... ¿Tengo que hacer algún cambio en el código? Por ejemplo borrar lo de columna-2 ¿o no?

Probando he colocado la primera parte del código, encima de main hasta debajo de la sidebar, pero me surge un problemilla, el post-footer se desconfigura y queda sobre el título de las entradas!

Porfis estaría muy agradecida si me puedes ayudar!!

Gracias :D

Responder
Anónimo

Gema.. porfis necesito tu ayudaaa :((

Responder
Gem@

Voy a mirar...

Responder
Gem@

Sidhe te lo miro mañana es ya muy tarde y no me da tiempo a probarlo ;)

Responder
Luxuria

Sigo divagando por las cosas interesantes que muestra este blog jeje y este efecto hace tiempo que me interesaba. El problema es que mi plantilla tiene más de 2 columnas y están ordenadas de forma diferente a la mayoría.

Es este por si así se entiende mejor: http://dolce-inferno.blogspot.com/

Además es que ya tiene aplicada sobre el fondo otro fondo negro por lo que al añadir el efecto siguiendo tus pasos, a parte de que se me descolocan las columnas, la transparencia apenas se ve.

He probado poniendo
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);/* For IE6&7 */

en cada columna correspondiente y pasa lo que comentáis, que la transparencia afecta a las imágenes.

Si me pudieseis ayudar me sería fantástico.

Responder
Gem@

El problema de descolocarse las sidebars es debido a no añadir correctamente la medida de la transparencia. En esta entrada explico como calcular las medidas pero para aplicar una única transparencia que ocupe el blog quizás en tu caso sería mejor debido a las sidebars.
Referente a que pierde calidad la imagen no ocurre con este código sino con otros añadidos a la CSS.
Con este en concreto lo que conseguimos es añadir la transparencia sobre el fondo y que el contenido quede sobre ella es por eso que no pierde calidad el contenido ;)

Responder
Némesis

Hola Gema! Me gusta la plantilla pero tengo problemas con la columna de enlaces y perfil :$

Me sale justo debajo de la columna de texto, en lugar de a un lado.Tienes idea de si habre hecho algo mal?

Gracias! ^^

Responder
Gem@

Hola Darĸ tu plantilla utiliza las mismas medias que la del ejemplo, prueba con las mismas medidas de la transparencia y verás como resulta bien ;)

Responder
Celeste

Gracias!!! :D

Hace mucho que quería hacer eso y no encontraba una explicación convincente de cómo hacerlo.

Todavía tengo que modificar algunas cosas... pero ya sé como hacerlo

Gracias!

Responder
Gem@

Me alegra que te gustara y fuera útil ;)

Responder
Seb

Una solucion util tambien es poner como background de la zona en la que se quiera poner tranpsarencia, una imagen que tenga bajada la opacidad en Photoshop, y guardada en formato png ;)

Responder
Gem@

Como solución está muy bien Seb, la diferencia es que añadiendo la transparencia de esta forma y una vez realizado los pasos podemos modificar el grado de opacidad y color cuantas veces queramos.
Esta es la única técnica que he visto hasta ahora donde la capa de transparencia se añade encima del fondo y debajo del contenido.
Y también la única que se visualiza igual en diferente navegador, para mi fue un gran descubrimiento porque me encanta el efecto, lo veo elegante y con un aire muy personal :)

Responder
Seb

Si, si, obviamente, esta mucho más rebuscada, y el resultado es muchas veces mejor, además de como tu dices, se pueden variar los resultados mas rapidamente una vez que le agarras la mano.

Responder
Gem@

Cuando te animes a probar este efecto me lo dices ;)

Responder
Luxuria

Hola Gema, hace tiempo dejé otro comentario en esta misma entrada. Como el diseño de mi blog no me convencía decidí que lo mejor era cambiar de plantilla y todo y estoy probando con un blog de pruebas. He conseguido añadir las transparencias a una plantilla de 3 columnas y hacer que cada una sea de un color. Con firefox se ve perfecto pero con explorer no hay cambios.

Muchas gracias por tan buen blog, me está ayudando muchísimo

Responder
Gem@

Hola Luxuria, el efecto se ve con ambos navegadores, quizás necesites actualizar Explorer porque en tu blog de pruebas si puedo apreciar la transparencia :)

Responder
Luxuria

Gracias Gema, aunque mi versión de explorer es el 7 y la que hay del 8 es beta, corrígeme si me confundo. De todas formas si tú lo puedes ver tendrá que ser eso. No entiendo como todavía la mayoría siguen usando explorer. Seguiré experimentado

Responder
Gem@

Yo utilizo el 8 ;)

Responder
Unknown

gemma una preguntita, lo hize, cambie numeros y abuse de la vista previa hasta canzarme xD pero no logro encontrar como cambiar la altura de la columna uno, ya que al final se posiciona sobre el footer.. Y ademas al guardar la plantilla me dice:

"Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

* HTML6"
Esto traera algun problema?


Siempre con paciencia y aguardando, Loree

Responder
Gem@

Loree ¿te refieres a añadir transparencias como en esta entrada o el tema que tratamos anteriormente de añadir un margen en los post?

Responder
Unknown

me refiero a las transparencias, es que estoy recorriendo tu blog e intentando de todo! que por cierto me encanta :D y en cuanto a los margenes, hice lo que me dijiste y no sucede nada.. :( estoy empezando a creer que mi blog esta maldito :o

Responder
Unknown

logre ponerle los margenes! :D solo me faltaba cerrar justify con un ; siempre por atolondrada.. bueno ahora veo como me arreglo con la transparencia, gracias!

Responder
Gem@

Loree antes de poner las transparencias guarda una copia de la plantilla por si acaso... ;)
También es buena idea descargar la plantilla que usamos y añadirla al blog de pruebas así vamos sobre seguro.

Responder
Demmi Smith-Listing

Simplemente ... GRACIAS!... por todos los buenos trucos y consejos que voy a empezar a poner en practica ... pero YA!!.

Responder
Gem@

yz Demmi Smith-Listing gracias a ti por comentar :)

Responder
Performance Románticas

hola tengo una duda quiero q el recuadro donde estan las publicacines no sea transparentesi no blanca

como podre hacer lo ?

Responder
Gem@

yz Ya lo tienes así en main-wrapper walter guasco :)

Responder
ahustin torres

Gema tengo una duda y si tengo 2 sidebar y tanbien le quiero poner a el header como hago

Responder
ahustin torres

Gema soy yo devuelta y te quiero desir que ya lo pude solucionar:
pero enves de ponerlo como vos dijiste probe un poco y logre un resultado igual pero para mi mas facil convine dos post tuyos el de sidebar con fondo de color y
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
(contenido de este post)

Responder
Gem@

yz Genial Agustin Torres pero ya sabes que ese tipo de transparencia se posiciona sobre el contenido, es decir que lo que añades se sitúa debajo de la transparencia.

Responder
sb

hola gema! te quería hacer una pregunta:

¿cómo lo hago para que sólo las imágenes del post no me salgan con transparencia?

mi blog es www.infectedcityblog.blogspot.com

gracias!
=)

Responder
Angela Arias Molina

Es la primera vez que comento aquí, pero de verdad era necesario: mil gracias. Haciéndole unas modificaciones conseguí que solo la parte de las entradas tenga transparencia ¡y ha sido todo gracias a ti!
Algún día, cuando termine de arreglar el diseño en el que estoy trabajando, te dejaré un link para que veas como me quedó gracias a tu truco.
¡Hasta pronto!

Responder
Gem@

yz Sol este tipo de transparencia no se añade en las imágenes del blog porque la transparencia se posiciona antes del contenido.
Tendría que ver online lo que me estás explicando.

yz Gracias por el comentario Angela.
Esperaremos :)

Responder
BLUEGAZER

Hola, una pequeña colaboracion con las transparencias. Pueden redondear las mismas si agregan en:

overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);/* For IE6&7 */

al final de (opacity=65);

agreguen: -moz-border-radius: 20px;-webkit-border-radius: 20px

Les quedara algo asi:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #003;
opacity: 0.40;
-moz-opacity: 0.40;
filter:alpha(opacity=35);-moz-border-radius: 20px;-webkit-border-radius: 20px/* For IE6&7 */
}

De esa forma las esquinas quedan redondeadas.

Saludos!

Responder
Gem@

:: Así es BLUEGAZER a la transparencia se le puede añadir cualquier propiedad como si fuera una imagen, también es posible añadir imagen de fondo y borde, queda muy atractivo, puedes ver un ejemplo aquí: http://marengot.blogspot.com/

Responder
DJBrown

Seria mas fácil hacer la imagen transparente en png y listo sin complicaciones....

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top